<template>
    <div class="wallet">
      <div class="header">
        <table class="header_tab01">
          <tr>
            <td id="header_tab01_t1">钱包</td>
            <td id="header_tab01_t2"><img src="@/assets/wallet/eye.png" /></td>
          </tr>
        </table>
      </div>
    </div>
  
    <!-- Total Assets Section -->
    <div class="total_assets">
      <table class="asset_tab01">
          <tr>
            <td style="padding-left: 10px">总资产折合(CNY)</td>
            <td style="text-align: center">
              <img src="@/assets/wallet/position.png" /> GT持仓
            </td>
            <td style="padding-right: 300px"> <!-- Increased padding-right for more right shift -->
              <img src="@/assets/wallet/list.png" /> 账单
            </td>
          </tr>
      </table>
  
      <!-- Display Total Value and BTC Value -->
      <div class="total_value">
        <h2>{{ total }}</h2>
        <p>≈{{ btcPrice }} BTC</p>
      </div>
  
      <!-- Today's Earnings and Analysis -->
      <table class="asset_tab02">
          <tr>
            <td class="earnings-label">今日收益(CNY)</td>
            <td rowspan="2" style="text-align: right">
              <span id="sp1"><img src="@/assets/wallet/increase.png" />资产分析</span>
            </td>
          </tr>
          <tr>
            <td class="earnings-percentage">
              +{{ increasePercentage }}% <span id="sp2">+{{ decreasePercentage }}%</span>
            </td>
          </tr>
      </table>
    </div>
    <div class="mid">
        <select>
          <option>USDT</option>
          <option>other</option>
        </select>
        <input type="text" placeholder="请输入金额" />
        <button>一键买币</button>
    </div>
    <div class="list">
      <div class="list_hd">
        <!-- <RouterLink to="/account">111</RouterLink> -->
        <div class="list_div" routerLink="/">
          <img src="@/assets/wallet/recharge.png" />充值
        </div>
        <div class="list_div" routerLink="/">
          <img src="@/assets/wallet/topUp.png" />提现
        </div>
        <div class="list_div" routerLink="/">
          <img src="@/assets/wallet/transfer.png" />划转
        </div>
        <div class="list_div" routerLink="/">
          <img src="@/assets/wallet/transfer.png" />push
        </div>
      </div>
    
    <div class="scl">
    <div class="li" v-for="wallet in wallets" :key="wallet.id">
      <RouterLink :to="wallet.link">
        <table>
          <tr id="t1">
            <td rowspan="2" class="name">{{ wallet.accountName }}</td>
            <td style="text-align: right">
              {{ wallet.money }}
              <span>CNY</span>
            </td>
            <td rowspan="2" style="text-align: right">></td>
          </tr>
          <!-- 如果需要显示BTC金额，可以在这里添加第二行 -->
        </table>
      </RouterLink>
    </div>
    </div>
  </div>
    
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRoute } from 'vue-router';
  const total = ref(188888.88);
  const rate = ref(7.2);
  const btcPrice = ref(0.036437);
  const increasePercentage = ref(0.00);
  const decreasePercentage = ref(0.00);

  const data = {
  "wallets": [
    {
      "id": 1001,
      "accountName": "现货账户",
      "money": 108888.88,
      "link": "/WalletAccount"
    },
    {
				"id": 1002,
				"accountName": "杠杆账户",
				"money": 18888,
				"link": "/WalletAccount"
			},
			{
				"id": 1003,
				"accountName": "合约账户",
				"money": 11112,
				"link": "/WalletAccount"
			},
			{
				"id": 1004,
				"accountName": "金融账户",
				"money": 50000,
				"link": "/WalletAccount"
			},
			{
				"id": 1005,
				"accountName": "量化账户",
				"money": 0.00,
				"link": "/WalletAccount"
			},
			{
				"id": 1006,
				"accountName": "支付账户",
				"money": 0.00,
				"link": "/WalletAccount"
			},
			{
				"id": 1007,
				"accountName": "轮证账户",
				"money": 0.00,
				"link": "/WalletAccount"
			},
			{
				"id": 1008,
				"accountName": "期权账户",
				"money": 0.00,
				"link": "/WalletAccount"
			}
    // ... 其他钱包数据 ...
  ]
};

// 使用ref包裹wallets数组，使其成为响应式数据
const wallets = ref(data.wallets);

// 如果需要使用路由，可以使用useRoute钩子
const route = useRoute();
</script>
  
  <style scoped>
  .wallet {
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5px;
  }
  
  .header {
    width: 1410px;
    height: 300px;
    background-color: #e3544c;
  }
  
  .header_tab01 {
    width: 500px;
    margin-top: 50px;
    margin-left: 20px;
  }
  
  .header_tab01 img {
    width: 25px;
    height: 25px;
  }
  
  #header_tab01_t1 {
    color: #eceef3;
    font-size: 18px;
    font-weight: bold;
  }
  
  #header_tab01_t2 {
    position: absolute;
    right: 30px;
    top: 9%;
    transform: translateY(-50%);
    margin-left: 50px;
  }
  
  .total_assets {
    position: absolute;
    width: 1310px;
    height: 240px;
    background-color: white;
    margin-left: 50px;
    margin-top: -220px;
    box-shadow: 0px 1px 2px grey;
    border-radius: 10px;
    padding: 20px;
  }
  
  .asset_tab01 {
    width: 100%;
    font-size: 17px;
    color: rgb(119, 125, 132);
    margin-top: 7px;
  }
  
  .asset_tab01 img {
    width: 12px;
    height: 12px;
  }
  
  .total_value {
    text-align: center;
    margin-top: 20px;
  }
  
  .total_value h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .total_value p {
    font-size: 16px;
    color: #999;
  }
  
  .asset_tab02 {
    width: 100%;
    font-size: small;
    margin-top: 20px;
  }
  
  /* Align the total assets and earnings labels properly */
  .earnings-label {
    padding-left: 100px;
    height: 25px;
    font-size: 18px; /* Increase the size for better visibility */
    vertical-align: middle;
  }
  
  .earnings-percentage {
    padding-left: 10px;
    font-size: 18px; /* Make percentage text the same size */
    vertical-align: middle;
  }
  
  .asset_tab02 #sp1 {
    opacity: 0.7;
    border-radius: 15px;
    box-shadow: 1px 1px 5px grey;
  }
  
  .asset_tab02 #sp2 {
    margin-left: 20px;
    font-size: 12px;
    color: #e53c3d;
  }
  
  .asset_tab02 img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .mid {
    /* margin: 0 auto; */
    margin-top: 100px;
    margin-left: 10%;
    margin-right: 20%;
    box-shadow: 1px 1px 3px grey;
  }
  .mid select {
    height: 30px;
    border: none;
  }
  .mid input {
    height: 25px;
    border: none;
    outline: none;
  }
  .mid button {
    height: 30px;
    border: none;
    margin-right: -20%;
    margin-top: 2px;
    background-color: #e53c3d;
    color: #f9fafc;
  }
  .list {
  width: 92;
  height: 420px;
  /* margin: 0 auto; */
  margin-top: 15px;
  background-color: #f4f5f6;
}

.list_hd {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
}
.list_hd img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.list_hd .list_div {
  width: 20%;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  line-height: 40px;
  color: #e53c3d;
  font-size: x-small;
  border: 2px solid red;
}

.scl {
  height: 300px;
  overflow: scroll;
}
.scl::-webkit-scrollbar {
  display: none;
}
.scl a {
  text-decoration: none;
  color: black;
}

.li {
  margin: 0 auto;
  margin-top: 20px;
  background-color: white;
  width: 95%;
  opacity: 0.8;
}
.li table {
  margin: 0 auto;
  margin-top: 20px;
  width: 95%;
  font-size: 17px;
}
  </style>